<template>
    <div>
        <div class="personality">
            <!-- 首页>个性定制婚纱 -->
            <div class="nav1">
                <router-link class="index" to="/">首页</router-link>
                <span>></span>
                <router-link to="#">个性定制婚纱</router-link>
            </div>
            <!-- 图 -->
            <img class="w-footer-pic" src="../../../../public/img/p_footer.jpg" alt="">
            <!-- 品牌文字介绍 -->
            <div class="produce">
                <h1>
                    Licorne purer
                    <br>
                    <span>纯真 · 至美 · 唯爱</span>
                </h1>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;Licorne purer 使用从世界各地挑选出的精细的服装面料，以高级定制的概念、前沿的剪裁技术进行服装设计,是花费漫长的岁月制作出来的精美婚纱礼服。
                    <br>
                    &nbsp;&nbsp;&nbsp;&nbsp;在Licorne
                    purer可以租到和高级定制礼服同样品质的礼服。每款婚纱由工作室的专门工作人员进行试穿,提出修改建议，经过不断地修改和整理,实现每款婚纱都能体现女性的独特知性美。另外,在这个充满幸福感的时期,为了想要多留一张珍藏的照片的新娘们,我们还准备了特别的照片计划。
                    最大的好处是可以从当天不同的礼服中挑选。 因而也成为了让正式演出更加美丽发光的预演练习,充满魅力的照片计划,期待你来体验。
                </p>
            </div>
            <!-- 婚纱展示区 -->
            <ul v-if="data">
                <li v-for="({title,isNew,explains,img1},i) in data.results" :key="title" v-show="i>=10 && i<20"  class="col-xs-6 col-sm-3 dress">
                   
                    <img :id="`${i}`" @click="goto(`${i}`)" v-src="img1" alt="">
                    <!-- hover 婚纱遮罩-->
                    <div class="dress-mask">
                        <div class="dress-summary">
                            <p :id="`${i}`" @click="goto(`${i}`)" class="dress-summary-title">{{title}}   <span v-if="isNew == 'true'">NEW</span></p>
                            <p :id="`${i}`" @click="goto(`${i}`)">{{explains}}</p>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- 商品页码 -->

            <!-- 店铺轮播图 -->
            <STORES></STORES>
            <!-- 猜你喜欢 -->
            <Guesst></Guesst>
            <!-- 回顶 -->
            <top></top>
        </div>
    </div>
</template>

<script>
import STORES from '@/components/STORES.vue';
import Guesst from '@/components/Guesst.vue';
import Top from "@/components/Top.vue";
export default {
    components: { STORES, Guesst,Top },
    data() {
        return {
            data: null
        }
    },
    mounted () {
        this.getData();
    },
    methods: {
        getData() {
            let url='/img_detail'
            this.axios.get(url).then(res=>{
                console.log(res);
                this.data =res.data
            })
        },
           // 编程式跳转  绑定goto方法
        //index: 代表触发goto函数的元素的序号
        goto(index) {
        console.log("index:", index);
        return this.$router.push("/westernDetail?lid=" + index);
        },
    },
}
</script>

<style lang="scss" scoped>
body {
    box-sizing: border-box;
}

.personality {

    // 首页>西式婚纱
    >.nav1 {
        padding: 13px 4px;
        font-size: 15px;

        a,
        span {
            padding: 0 4px;
        }
    }

    //图片
    .w-footer-pic {
        width: 100%;
        padding: 8px 0;
    }

    // 品牌文字介绍
    .produce {
        >h1 {
            font-family: monospace;
            font-size: 40px;
            color: #444;
            text-align: center;
            margin: 0;
            padding-bottom: 3px;
            line-height: 1.5;
            padding: 50px 0 0;

            >span {
                display: block;
                letter-spacing: initial;
                padding-bottom: 50px;
                font-family: Libre Baskerville, sans-serif;
                font-size: 1.3rem;
                color: #999;
                text-align: center;
                line-height: 1.5;
                margin: 0;
            }
        }

        >p {
            color: #777;
            line-height: 2;
            font-family: Libre Baskerville, sans-serif;
            margin: 0 0 80px;
            padding: 0 15px;
        }
    }

    // 婚纱展示
    ul {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;

        // 每个卡片
        >li.dress {
            width: 48%;
            padding-bottom: 55px;
            position: relative;

            >img {
                width: 100%;
                display: block;
            }

            // 遮罩 :后面利用js实现,onmouseover时调用方法,让遮罩显示opacity:1
            >.dress-mask {
                position: absolute;
                left: 0;
                bottom: 0;


                >.dress-summary {
                    padding: 3px 6px 10px;
                    background-color: rgba(255, 255, 255, .3);

                    >p.dress-summary-title {
                        line-height: 1.428571429;
                        color: #444;
                        margin-bottom: 3px;
                        font-size: 14px;
                        font-family: 黑体;

                        >span {
                            border: 1px solid #786542;
                            color: #786542;
                            padding: 0px 6px;
                            border-radius: 16%;
                            font-size: 7px;
                            font-family: 黑体;
                        }
                    }

                    >p:nth-child(2) {
                        line-height: 1.428571429;
                        color: #444;
                        font-family: 黑体;
                        font-size: 14px;
                        // 设置多行文本溢出省略号
                        // 文本溢出隐藏
                        overflow: hidden;
                        /* 转为弹性伸缩盒子 省略号,同text-overflow:ellipsis */
                        display: -webkit-box;
                        /* 设置弹性盒子的子元素的排列方式 */
                        -webkit-box-orient: vertical;
                        /* 设置显示文本的行数  最多显示4行 */
                        -webkit-line-clamp: 1;
                    }
                }


            }
        }
    }

    .pic img {
        display: block;
        width: 150px;
        height: 210px;
        margin: 20px 13px;
    }

    .pic {
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 30px;
    }

    .pic span {
        font-size: 20px;
        font-family: cursive;
    }

}
</style>